Styling the payment page (callback_form)

By setting the callback pages using specific elements, you can control the styling of the pages using CSS.

You can either redirect your customer to the payment page, using the Url returned from the call to the createPaymentRequest method, or show the payment page dynamically in an iframe on your checkout page, using the DynamicJavascriptUrl, also returned from the createPaymentRequest method:

The payment page must contain a form with id="PensioPaymentForm", for example:

<form id="PensioPaymentForm" >
	<!--All content in here will be replaced by the actual payment form-->
</form>

In addition to that element, we provide three types of the forms: table, div and dynamic div.

You can use the table structure right away, without implementing any styling. For the div form you will have to add some styling to fit it within your site design.

Sometimes you may wish to implement a more advanced styling, like highlighting the currently selected element of the card, or showing the customer an incorrect or unrecognised entry. These things can be implemented with our dynamic div.

To make it easier to implement the dynamic div events for you, we have added specific classes to the html body tag, so you can control the styling of the current activity in the payment form.

Please contact us if you would like to change the terminal type.

When the card number is based on a credit card token we will add the following class to the body:

Class Description

CSS Example
tokenBasedPan Set when the card number is based on a token 
body.tokenBasedPan #idOfElementToStyle {
color: green;
}
Class Description

CSS Example
validCvc Set when the customer enters a correct CVC 
body.validCvc #idOfElementToStyle {
color: green;
}
partlyEnteredCvc Set when the customer has entered part of a CVC 
body.partlyEnteredCvc #idOfElementToStyle {
color: yellow;
}
validCardholderName Set when the customer enters a name 
body.validCardholderName #idOfElementToStyle {
color: green;
}
partlyEnteredCardholderName Set when the customer partly entered a name 
body.partlyEnteredCardholderName #idOfElementToStyle {
color: yellow;
}
validPan Set when the customer entered a correct credit card number 
body.validPan #idOfElementToStyle {
color: green;
}
partlyEnteredPan Set when the customer enters part of a credit card number 
body.partlyEnteredPan #idOfElementToStyle {
color: yellow;
}
validExpiryMonth Set when the customer selects a valid credit card expiry month 
body.validExpiryMonth #idOfElementToStyle {
background-color: green;
}
validExpiryYear Set when the customer selects a valid credit card expiry year 
body.validExpiryYear #idOfElementToStyle {
background-color: green;
}
validExpiry Set when the customer selects a valid credit card expiry year and month 
body.validExpiry #idOfElementToStyle {
background-color: green;
}
Class Description

CSS Example
creditCardNumberInputFocus Set when the customer selects the card number input field 
body.creditCardNumberInput #idOfElementToStyle {
border: 1px solid black;
}
emonthFocus Set when the customer selects the expiry date month select box 
body.emonthFocus #idOfElementToStyle {
border: 1px solid black;
}
eyearFocus Set when the customer selects the expiry date year select box 
body.eyearFocus #idOfElementToStyle {
border: 1px solid black;
}
cvcInputFocus Set when the customer selects the CVC/CVV2 input box 
body.cvcInputFocus #idOfElementToStyle {
border: 1px solid black;
}

To add a custom submit button, you can add a button with the class set to "CustomAltaPaySubmitButton", for example:

<input type="button" class="CustomAltaPaySubmitButton" value="Pay" />

You can style the new button in your CSS, where you also need to hide the original button ("AltaPaySubmitButton"):

<style type="text/css">
	.AltaPaySubmitButton {
		display: none !important;
	}
	.CustomAltaPaySubmitButton {
		display: block;
		color: red;
		font-size: 140%;
	}
</style>

To enable this feature, contact us.

To let your customers set the payment amount: 

  • Include an <input> or <textarea> element with the name set to "PensioOverrideAmount".
  • Include an element with the id set to "PensioOverrideAmountError". This is where error messages are displayed.

You can use any of these elements: 

  • <input type="text">
  • <input type="radio">
  • <textarea>
  • <select>

For example: 

<input type="number" name="PensioOverrideAmount" />
<div id="PensioOverrideAmountError" />
<form id="PensioPaymentForm">
	All content in here will be replaced by the actual payment form
</form>

If the required elements are not found, an alert box is shown. Use this for troubleshooting.

Even if you supply set amounts using, for example, radio buttons, the user can use the Javascript console or a tampering tool to change the amount. If you have special requirements you must verify the paid amount on the OK, callback or verify-order callback pages.

To style the surcharge notice for customers using a browser where JavaScript is not enabled, use the following CSS:

<style type="text/css">
	#PensioJavascriptDisabledSurchargeNotice {
		color: red !important;
		background-color: white !important;
	}
</style>

To enable the following features, contact us:

  • Form timeout. If your customer is idle for a given amount of time, the payment is automatically cancelled.
  • Public terminal setting. If your customer shops using a public computer, you can improve the security of the payment flow by masking the card number and cvc/cvv, and disabling the auto-complete feature in the browser. This feature might not work in all the cases. Auto-saving passwords and auto-completing fields should be disabled in the browser.

For terminals with the iDeal acquirer enabled, you can show either

  • the iDeal logo,
  • or the name in text form,
  • or both if you prefer) -

Showing the text is the default.

You control the visibility using the classes "ideal-logo" and "ideal-text". For example: 

<style type="text/css">
	.ideal-logo {
		display: inline !important;
	}
	.ideal-text {
		display: none !important;
	}
</style>

When enabling credit card token payments, the customer can choose between two payment forms; one for token payments, and the other for regular payments.

The choice is made using javascript, but as not all customers have javascript enabled, the forms might have to be styled differently for javascript enabled browsers and browsers with javascript disabled if you wish to provide support for both. To do this, use the <noscript> tag to define the style for browsers without javascript.

Normally when styling for browsers with javascript, the stylesheet for the javascript browsers is added to the page like this:

<script type="text/javascript">
document.write('<link rel="stylesheet" type="text/css" href="js-styles.css" />')
</script>
<noscript>
<link rel="stylesheet" type="text/css" href="no-js-styles.css" />
</noscript>

But since we do not allow javascript in the callback pages, another technique has to be used.

Thjs style is added into the regular stylesheet, and the no-js stylesheet is added in a <noscript> tag that is added to the page after the js styles, effectively overwriting them. This results in all unwanted styles in the regular stylesheet being overwritten in the <noscript> stylesheet.

In the following example the forms are styled as tabs in the js example and as consecutive forms in the non-js example. Notice for example how float is set to 'none' in the <noscript> stylesheet, and 'left' in the normal stylesheet.

<html>
<head>
<style type="text/css">
.FormTypeButton {
float: left;
position: relative;
top: 0px;
margin-left: 10px;
background-color: white;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 0px;
z-index: 50;
}
.FormTypeButton.Selected {
background-color: #eeeeee;
z-index: 100;
}
form {
z-index: 75;
position: absolute;
top: 19px;
background-color: #eeeeee;
width: 550px;
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<noscript>
<style type="text/css">
.FormTypeButton {
float: none;
position: relative;
top: auto;
margin-left: 10px;
background-color: white;
border: 0px;
z-index: auto;
font-size: 20px;
}
.FormTypeButton.Selected {
background-color: white;
z-index: auto;
}
form {
z-index: auto;
position: relative;
top: auto;
background-color: #eeeeee;
width: 550px;
border: 1px solid black;
}
</style>
</noscript>
</body>
</html>

The payment form can provide hints for sighted users as well as screen readers. These hints may be styled by targeting the pensio_required_field_indicator class, which is used in two contexts:

  • There are a number of span elements within the labels for all required fields. These elements all just contain a single asterisk.
  • There is a div element at the top of the form which contains an asterisk and the text "indicates a required field". This asterisk is also wrapped in a span element.
Currently, only the dynamic-div-based payment form provides this functionality, and even there, the visual elements are hidden by default. 

<style type="text/css">
    .pensio_required_field_indicator {
        display: unset; /* Unhide elements */
    }
    div.pensio_required_field_indicator {
        font-style: italic; /* Style as you wish */
    }
    span.pensio_required_field_indicator {
        color: red; /* Style as you wish */
    }
</style>